30天用React打造AI工具箱 Day4

今天要來看React的核心：元件(Component)。
React的哲學就是「一切都是元件」，你可以想像元件就是一個積木，可以組裝出更大的畫面。

什麼是 Function Component？

Function Component其實就是 一個回傳畫面(JSX)的JavaScript函式。
在React裡，每個畫面區塊幾乎都是用Function Component寫的。

// 最基本的 Function Component
export default function Hello() {
  return <h1>Hello, React!</h1>;
}

函式名稱要大寫（例如Hello），這是React的規定。
而export default function是讓其他地方可以調用這個函式
return 內回傳的不是字串，而是一個特殊的語法：JSX。

JSX是什麼？

JSX（JavaScript XML）是一種語法糖，讓你在JavaScript裡寫HTML-like語法。
瀏覽器本身不認得JSX，Vite/React工具會幫你轉成真正的JavaScript。

// JSX寫法
const element = <h1 className="text-blue-600">Hello World</h1>;

注意：在JSX裡要寫class，要用className，因為class是JavaScript保留字。

建立第一個元件

我們試試看改動我們原本App.jsx中的內容，來做一段簡單的介紹。

export default function App() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">我的第一個 React 元件</h1>
      <p className="mt-2 text-gray-700">哈囉，我是用 Function Component 寫的！</p>
    </div>
  );
}

這樣就可以看到這個畫面囉~

那這樣做有什麼好處呢？
好處就是元件「可以拆開」與「重複使用」。

例如我們新建一個Hello.jsx檔案，並且輸入：

export default function Hello() {
  return <p className="text-green-600">Hello, 我是子元件！</p>;
}

這樣就可以在我們的App.jsx中引用囉。

import Hello from "./Hello";

export default function App() {
  return (
    <div className="p-6">
      <h1 className="text-xl font-bold">元件組合示範</h1>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

成功畫面是這樣